import React, { Component, PureComponent } from "react";
/* 
  两个高性能组件
  1. PureComponent 类组件中的
  2. Memo 函数式组件中
  两个用于性能优化的hook
  1. useCallback 记忆函数
  2. useMemo 记忆值
*/
class Demo extends Component {

  shouldComponentUpdate(nextProps,nextState){
    if(this.props.msg === nextProps.msg){
      return false;
    }
    return true;
  }
  render() {
    console.log("Demo 组件渲染了");
    return (
      <div>
        <h1>Demo 组件 {this.props.msg}</h1>
      </div>
    );
  }
}

class App extends Component {
  state = {
    num: 1,
  };
  render() {
    return (
      <div>
        <Demo msg="demo"></Demo>
        <button
          onClick={() => {
            this.setState({
              num: this.state.num + 1,
            });
          }}
        >
          加一{this.state.num}
        </button>
      </div>
    );
  }
}

export default App;
